import React, { FC, useRef, useState } from 'react';
import { Menu } from 'choerodon-ui';
import { Modal } from 'choerodon-ui/pro';
import { get } from '@choerodon/inject';
import { inject } from 'mobx-react';
import { observer } from 'mobx-react-lite';
import { axios } from '@choerodon/master';
import { handlePipelineModal } from '../job-types-panel';
import useTabData from '@/routes/app-pipeline/routes/app-pipeline-edit/hooks/useTabData';
import { TAB_BASIC, TAB_FLOW_CONFIG } from '@/routes/app-pipeline/routes/app-pipeline-edit/stores/CONSTANTS';
import jobTypes from '@/routes/app-pipeline/routes/pipeline-manage/stores/jobsTypeMappings';
import './index.less';
import { LARGE, MIDDLE } from '@/utils/getModalWidth';
import AddCDTask
  from '@/routes/app-pipeline/routes/pipeline-manage/components/PipelineCreate/components/AddCDTask';

export type JobTypesPanelProps = {
  handleJobAddCallback:(addonData: any, addAndEdit:boolean)=>(editData:any)=>void
  handlePanelClickCallback:()=>void
  stageIndex:number
  jobIndex:number
  handleBlur:CallableFunction
  AppState?: any,
}

const {
  SubMenu,
  Item,
} = Menu;

const prefixCls = 'c7ncd-job-cd-panel';

const installItems = get('configuration.devops-routes-app-pipeline-pipelineEdit:cd');

const {
  handleMenuClickToGetAppService,
} = installItems || {};

const JobCdPanel:FC<JobTypesPanelProps> = (props) => {
  const {
    handleJobAddCallback,
    handlePanelClickCallback,
    stageIndex,
    jobIndex,
    AppState,
  } = props;

  const [_data, _setdata, getTabData] = useTabData();

  const handleMenuSelect = async (data:any) => {
    handlePanelClickCallback();
    const newData = {
      type: data?.key,
    };
    handlePipelineModal({
      data: newData,
      callback: handleJobAddCallback(newData, true),
    });
    // handlePipelineModal()
    // const { keyPath } = data;
    // const basicData = getTabData(TAB_BASIC);
    // let appServiceId;
    // let appServiceName;
    // if (basicData?.appService) {
    //   appServiceId = basicData?.appService?.appServiceId;
    //   appServiceName = basicData?.appService?.appServiceName;
    // } else if (handleMenuClickToGetAppService) {
    //   const {
    //     type,
    //     config,
    //     transformResponse,
    //   } = handleMenuClickToGetAppService;
    //   switch (type) {
    //     case 'axios': {
    //       const result = await axios(config(basicData, AppState));
    //       if (transformResponse) {
    //         appServiceId = transformResponse(result)?.appServiceId;
    //         appServiceName = transformResponse(result)?.appServiceName;
    //       }
    //       break;
    //     }
    //     default: {
    //       break;
    //     }
    //   }
    // }
    // if (appServiceId && appServiceName) {
    //   // 初始进入弹窗时 当前stage的数据 为了在cancel的时候 能重置回修改前的数据
    //   const originData = getTabData(TAB_FLOW_CONFIG);
    //   Modal.open({
    //     key: Modal.key(),
    //     title: (
    //       <p>
    //         添加
    //         {/* @ts-ignore */}
    //         {jobTypes[keyPath[0]]}
    //       </p>
    //     ),
    //     style: {
    //       width: MIDDLE,
    //     },
    //     maskClosable: false,
    //     children: (
    //       <AddCDTask
    //         appServiceName={appServiceName}
    //         appServiceId={appServiceId}
    //         random={Math.random()}
    //         handleOk={handleJobAddCallback({ type: keyPath[0] }, false)}
    //         taskType={keyPath[0]}
    //         stageData={getTabData(TAB_FLOW_CONFIG)}
    //         stageIndex={stageIndex}
    //         jobIndex={jobIndex}
    //       />
    //     ),
    //     onCancel: () => {
    //       _setdata(originData);
    //     },
    //     drawer: true,
    //     okText: '添加',
    //   });
    // }
  };

  const getMenuItem = () => {
    if (installItems) {
      return (
        <Menu
          onClick={handleMenuSelect}
          className={`${prefixCls}-subMenu`}
        >
          {installItems.list.map((item:any) => {
            if (item.submenus) {
              return (
                <SubMenu title={item.title}>
                  {item.submenus.map((subItem:any) => (
                    <Item key={subItem.key}>{subItem.title}</Item>
                  ))}
                </SubMenu>
              );
            }
            return (
              <Item key={item.key}>{item.title}</Item>
            );
          })}
        </Menu>
      );
    }
    return (
      <Menu
        onClick={handleMenuSelect}
        className={`${prefixCls}-subMenu`}
      >
        {/* <SubMenu title="容器部署">
          <Item key="cdDeploy">Chart包</Item>
          <Item key="cdDeployment">部署组</Item>
        </SubMenu>
        <Item key="cdHost">主机部署</Item> */}
        <Item key="cd_audit">人工卡点</Item>
        <Item key="cd_chart_deploy">Chart包</Item>
        {/* <Item key="cdApiTest">API测试</Item>
        <Item key="cdExternalApproval">外部卡点</Item> */}
      </Menu>
    );
  };

  return getMenuItem();
};

export default inject('AppState')(observer(JobCdPanel));
